<template>
    <div
            v-loading="loading"
            class="app-container"
            :element-loading-text="loadingText"
    >
        <el-form ref="queryForm" label-width="88px">
            <el-form-item label="挂号单ID" prop="regId">
                <el-input
                        v-model="regId"
                        clearable
                        placeholder="请输入挂号单号"
                        size="small"
                        style="width:300px"
                />
                <el-button type="primary" icon="el-icon-search" size="mini"  @click="handleQuery">查询</el-button>
                <el-button type="primary" icon="el-icon-search" size="mini" >读取IC卡</el-button>
            </el-form-item>
        </el-form>

        <!-- 挂号输入框下面的所有内容开始 -->
        <div  v-if="careHistory.regId!==undefined">
            <!-- 病例信息开始 -->
            <el-card style="margin-bottom: 5px;">
                <el-form label-position="right" label-width="120px" inline class="demo-table-expand">
                    <el-form-item label="挂号单号:" >
                        <span v-text="careHistory.regId" class="txt"/>
                    </el-form-item>
                    <el-form-item label="医生姓名:" >
                        <span v-text="careHistory.userName" class="txt" />
                    </el-form-item>
                    <el-form-item label="科室名称:">
                        <span v-text="careHistory.deptName" class="txt"/>
                    </el-form-item>
                    <el-form-item label=" 患者姓名:">
                        <span v-text="careHistory.patientName" class="txt"/>
                    </el-form-item>
                    <el-form-item label="就诊时间:">
                        <span v-text="careHistory.careTime"  class="txt"/>
                    </el-form-item>
                    <el-form-item label="主诉:">
                        <span v-text="careHistory.caseTitle" class="txt"/>
                    </el-form-item>
                    <el-form-item label="诊断信息:">
                        <span v-text="careHistory.caseResult" class="txt"/>
                    </el-form-item>
                    <el-form-item label="医生建议:">
                        <span v-text="careHistory.doctorTips" class="txt"/>
                    </el-form-item>
                </el-form>
            </el-card>
            <!-- 病例信息结束 -->
            <!-- 工具按钮开始 -->
            <el-card style="margin-bottom: 5px">
                <el-button type="success" icon="el-icon-finished" @click="handleSelectAll">全选</el-button>
                <el-button type="success" icon="el-icon-finished" @click="handleUnSelectAll">取消全选</el-button>
                <el-button type="danger" icon="el-icon-bank-card"  @click="handlePayWithCash">现金支付</el-button>
                <el-button type="danger" icon="el-icon-bank-card" @click="handlePayWithZfb">支付宝支付</el-button>
                <span style="margin-left:20px">订单总额:<span style="color:#ff0000;margin-left:20px">￥:{{ allAmount }}</span></span>

            </el-card>
            <!-- 工具结束开始 -->

            <!-- 未支付的处方信息开始 -->
            <el-card style="margin-bottom: 5px">
                <el-collapse v-if="careOrders.length>0" v-model="activeNames">
                    <el-collapse-item v-for="(item,index) in careOrders" :key="index" :name="index">
                        <template slot="title">
                            【{{ item.coType==='0'?'药用处方':'检查处方' }}】【{{ index+1 }}】【处方总额】:￥{{item.sum }}
                        </template>
                        <el-table
                                ref="refTable"
                                v-loading="loading"
                                border
                                :data="item.careOrderItems"
                                :row-class-name="tableRowClassName"
                                @selection-change="handleCareOrderItemSelectionChange($event,item.coId)"
                        >
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column label="序号" align="center" type="index" width="50" />
                            <el-table-column :label="item.coType==='0'?'药品名称':'项目名称'" align="center" prop="itemName" />
                            <el-table-column label="数量" align="center" prop="num" />
                            <el-table-column label="单价(元)" align="center" prop="price" />
                            <el-table-column label="金额(元)" align="center" prop="amount" />
                            <el-table-column label="备注" align="center" prop="remark" />
                            <el-table-column label="状态" align="center" prop="status" :formatter="statusFormatter" />
                        </el-table>
                    </el-collapse-item>
                </el-collapse>
            </el-card>
            <!-- 未支付的处方信息结束 -->
            <!-- 挂号输入框下面的所有内容结束 -->
        </div>
        <div v-else style="text-align:center">请输入正确的挂号单ID查询</div>
        <!-- 支付宝支付的弹出层开始 -->
        <el-dialog
                title="请使用支付宝支付"
                :visible.sync="openPay"
                center
                :close-on-click-modal="false"
                :before-close="handleClose"
                append-to-body>
            <el-form label-position="left" label-width="120px" >
                <el-card>
                    <el-form-item label="订单号:">
                        <span class="txt">{{ payObj.orderId }}</span>
                    </el-form-item>
                    <el-form-item label="总金额:">
                        <span>{{ payObj.price }}</span>
                    </el-form-item>
                </el-card>
            </el-form>
            <div style="text-align:center" class="txt">
                <vue-qr :text="payObj.codeUrl" :size="200" />
                <div>请使用支付宝扫码</div>
            </div>
        </el-dialog>
        <!-- 支付宝支付的弹出层结束 -->
    </div>
</template>

<script>
    import vueQr from "vue-qr"
    import Vue from "vue";
    import Medicinal from "@/views/stock/Medicinal";
    export default {
        name: "Docharge",
        components: {Medicinal},
        components:{
            vueQr
        },

        data(){
            return{
                // 整体遮罩
                loading: false,
                // 设置遮罩层的文字
                loadingText: '',
                // 用户输入的挂号单号
                regId: undefined,
                // 病例对象
                careHistory: {},
                // 当前选中的订单总额
                allAmount: 0.00,
                // 默认药用处方
                coType:'0',
                //处方信息
                careOrders:[],
                // 展开的折叠面板的名字
                activeNames: [],
                // 处方详情的状态字典
                statusOptions: [],

                // 当前选中的所有项目集合
                itemObjs: [],

                // 支付对象
                payObj: {},
                // 是否打开支付宝二维码支付层
                openPay: false,
            }
        },
        methods:{
            //查询
            handleQuery(){
                if (this.regId === '') {
                    Vue.prototype.$message.error('请输入挂号单号')
                    this.resetCurrentParams()
                    return
                }
                this.careHistory = {}
                this.careOrders = []
                this.itemObjs = []
                this.loadingText = '数据查询中，请稍后...'
                this.$axios.get("/charge/api/careHistory/getRegId/"+this.regId).then(result=>{
                    console.log( result.data.t)
                    this.careHistory = result.data.t.careHistory;
                    this.careOrders=result.data.t.list;
                    this.loadingText = ''
                    this.careOrders.filter((c, index) => {
                        this.activeNames.push(index)
                    })
                }).catch(() => {
                    Vue.prototype.$message.error('查询失败')
                })

            },
            initCareOrderItem(){
                this.$axios.get("/charge/api/careHistory/getByType/his_order_details_status").then(r=>{
                    this.statusOptions=r.data.t;
                })
            },
            // 翻译处方详情状态
            statusFormatter(row){
                return this.formatDict(this.statusOptions, row.status)
            },


            // 全选择
            handleSelectAll() { // 先取消再反选择
                const tab = this.$refs.refTable
                tab.filter(t => {
                    t.clearSelection()
                    t.toggleAllSelection() // 注意不要用错方法了
                })
            },
            // 取消全选
            handleUnSelectAll() {
                const tab = this.$refs.refTable
                tab.filter(t => {
                    t.clearSelection()
                })
            },

            // 监听多个表格的checkbox的选中事件
            handleCareOrderItemSelectionChange(selection, coId) {
                if (this.itemObjs.length === 0) {
                    this.itemObjs = selection
                } else {
                    for (let i = 0; i < this.itemObjs.length; i++) {
                        const obj = this.itemObjs[i]
                        if (obj.coId === coId) {
                            this.itemObjs.splice(i, 1)
                            i--
                        }
                    }
                    // 最后再来添加
                    selection.filter(newItem => {
                        this.itemObjs.push(newItem)
                    })
                }
                // 调用计算选中的总额
                this.computeAllAmount()
            },
            // //计算选中的总额
            computeAllAmount() {
                this.allAmount = 0
                this.itemObjs.filter(item => {
                    this.allAmount += item.amount
                })
            },
            tableRowClassName({ row, rowIndex }) {
                row.index = rowIndex
            },

            // 清空careHistory
            resetCurrentParams() {
                this.careHistory = {}
                this.careOrders=[]
            },

            // 现金支付
            handlePayWithCash() {
                if (!this.careHistory.regId) {
                    Vue.prototype.$message.error('请输入挂号单ID查询')
                    return
                } else if (this.itemObjs.length === 0) {
                    Vue.prototype.$message.error('请选择要支付的项目')
                    return
                } else {
                    // 组装数据
                    const postObj = {
                        orderChargeDto: {
                            orderAmount: this.allAmount,
                            chId: this.careHistory.chId,
                            regId: this.careHistory.regId,
                            patientName: this.careHistory.patientName
                        },
                        orderChargeItemDtoList: []
                    }
                    this.itemObjs.filter(item => {
                        const obj = {
                            itemId: item.itemId,
                            coId: item.coId,
                            itemName: item.itemName,
                            itemPrice: item.price,
                            itemNum: item.num,
                            itemType: item.itemType,
                            itemAmount: item.amount
                        }
                        postObj.orderChargeItemDtoList.push(obj)
                        console.log(JSON.stringify(postObj))

                    })
                    // 发送请求
                    this.loadingText = '订单创建并现金支付中'
                    this.$confirm('是否确定创建订单并使用现金支付?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$axios.post("/charge/api/careHistory/payObj/",postObj).then(res => {
                            this.$message.success('订单创建并现金支付成功')
                            this.resetCurrentParams()
                        }).catch(() => {
                            Vue.prototype.$message.error('创建订单失败')
                        })
                    }).catch(() => {
                        Vue.prototype.$message.error('创建已取消')
                    })
                }
            },


            // 微信收费
            handlePayWithZfb() {
                if (!this.careHistory.regId) {
                    Vue.prototype.$message.error('请输入挂号单ID查询')
                    return
                } else if (this.itemObjs.length === 0) {
                    Vue.prototype.$message.error('请选择要支付的项目')
                    return
                } else {
                    // 组装数据
                    const postObj = {
                        orderChargeDto: {
                            orderAmount: this.allAmount,
                            chId: this.careHistory.chId,
                            regId: this.careHistory.regId,
                            patientName: this.careHistory.patientName
                        },
                        orderChargeItemDtoList: []
                    }
                    this.itemObjs.filter(item => {
                        const obj = {
                            itemId: item.itemId,
                            coId: item.coId,
                            itemName: item.itemName,
                            itemPrice: item.price,
                            itemNum: item.num,
                            itemType: item.itemType,
                            itemAmount: item.amount
                        }
                        postObj.orderChargeItemDtoList.push(obj)
                        console.log(JSON.stringify(postObj))
                        // console.log(JSON.stringify(postObj))

                    })
                    // 发送请求
                    this.loadingText = '订单创建并支付宝支付中'
                    this.$confirm('是否确定创建订单并使用支付宝支付?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$axios.post("/charge/api/careHistory/payWx/",postObj).then(res => {
                            this.payObj = res.data.t
                            this.$message.success('订单创建成功，请扫码支付')
                            const tx = this
                            tx.openPay = true// 打开支付的弹出层
                            // 定时轮询
                            tx.intervalObj = setInterval(function() {
                                // 根据ID查询订单信息
                                tx.$axios.post("/charge/api/careHistory/status/"+tx.payObj.orderId).then(res => {

                                    if (res.data.t  === true) { // 说明订单状态为支付成功
                                        // 清空定时器
                                        clearInterval(tx.intervalObj)
                                        tx.$notify({
                                            title: '支付成功',
                                            message: '【' + tx.payObj.orderId + '】的订单编写支付成功',
                                            type: 'success'
                                        })
                                        tx.openPay = false
                                        tx.resetCurrentParams()
                                    }
                                }).catch(() => {
                                    // 清空定时器
                                    clearInterval(tx.intervalObj)
                                })
                            }, 200)
                            this.loading = false
                        }).catch(() => {
                            Vue.prototype.$message.error('创建订单失败')
                            this.loading = false
                        })
                    }).catch(() => {
                        Vue.prototype.$message.error('创建已取消')
                        this.loading = false
                    })
                }
            },
            // 如果用户没有支付，而弹出层被关闭了
            handleClose() {
                this.$confirm('您确定放弃支付吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    Vue.prototype.$message.error('您已放弃支付，可以回到收费查询列表里面再次支付')
                    this.resetCurrentParams()
                    this.openPay = false
                    // 关闭轮询
                    clearInterval(this.intervalObj)
                }).catch(() => {
                    Vue.prototype.$message.error('欢迎继续支付')
                })
            }

        },
        created() {
            this.initCareOrderItem();
        }

    }
</script>

<style>

    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .txt{
        width:150px;display: block;
    }


</style>
